<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between" align="middle" class="titleelrow">

        <el-button type="primary" @click="addfangchan">添加房产</el-button>
        <el-row>
          <el-select v-model="query.agent_contains">
            <el-option label="查看全部" value="" />
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input v-model="query.title_contains" placeholder="请输入内容" style="width:500px" />
          <el-button type="primary" plain @click="selectFn">
            筛选
          </el-button>
        </el-row>

      </el-row>
      <hr>
      <template>
        <el-table
          :data="properties"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="封面"
            width="175"
          >
            <template slot-scope="{row}">
              <img :src="row.image" alt="" style="width:100px">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="175"
          >
            <template slot-scope="{row}">
              {{ row.title }}
            </template>
          </el-table-column>
          <el-table-column
            prop="tags"
            label="标签"
            width="175"
          >
            <template slot-scope="{row}">
              <span v-for="tag in row.tags" :key="tag">
                {{ tag }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="175"
          >
            <template slot-scope="{row}">
              {{ row.address }}
            </template>
          </el-table-column>
          <el-table-column
            prop="agent.name"
            label="经纪"
            width="175"
          />
          <el-table-column
            prop="price"
            label="价格"
            width="175"
          />
          <el-table-column
            prop="photos"
            label="图片"
            width="175"
          >
            <template slot-scope="{row}">
              <div v-for="item in row.photos" :key="item" style="float:left">
                <img :src="item" alt="" style="width:50px">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="175"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editDialog(scope.row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.size"
          :current-page="page.page"
          @current-change="changePage"
        />
      </el-row>
      <!-- 分页 -->

      <!-- 弹窗 -->
      <addtanchuan ref="propertyDialog" :show-dialog.sync="showDialog" @addfangchan="property" />

    </el-card></div>
</template>

<script>
import addtanchuan from '@/views/house/addfangchan'

import { getproperties, delProperty, getPgProperties } from '@/api/house'

import { getAgents } from '@/api/client'
export default {
  components: {
    addtanchuan
  },

  data() {
    return {
      test: '',
      showDialog: false,
      tableData: [],

      options: [],
      value: '',
      properties: [],
      page: {
        page: 1, // 当前页码
        size: 2,
        total: 20 // 总数
      },
      // 分页参数
      query: {
        // 每页获取条数
        _limit: 2,
        // 第0条开始获取数据
        _start: 0,
        // 带值的参数
        agent_contains: '',
        title_contains: ''
      }
    }
  },
  created() {
    this.property()
  },
  methods: {
    async changePage(newPage) {
      // 当前分页点击的页数
      this.page.page = newPage
      // 从第几条获取数据
      this.query._start = (this.page.page - 1) * this.query._limit
      // 获取结果
      const result = await getPgProperties(this.query)
      // 绑定数据重新渲染页面
      this.properties = result.data
    },
    async selectFn() {
      this.query._start = 0
      this.query._limit = this.page.size
      this.page.page = 1
      let res = 0
      if (this.query.agent_contains || this.query.title_contains) {
        this.query._limit = 9999
        res = await getPgProperties(this.query)
        this.page.total = res.data.length
        this.query._limit = this.page.size
      } else {
        const result = await getproperties()
        this.page.total = result.data.length
        res = await getPgProperties(this.query)
      }
      res = await getPgProperties(this.query)

      this.properties = res.data
    },
    editDialog(id) {
      this.showDialog = true
      this.$refs.propertyDialog.getproperty(id)
    },
    async property() {
      const result = await getAgents()
      this.options = result.data

      this.query._limit = 9999
      const start = this.query._start
      this.query._start = 0
      const data = await getPgProperties(this.query)
      this.page.total = data.data.length
      this.query._limit = this.page.size
      this.query._start = start

      const res = await getPgProperties(this.query)

      this.properties = res.data
    },
    async handleClick(id) {
      try {
        await this.$confirm('确定要删除该数据吗？')
        await delProperty(id)
        if (this.page.total % this.query._limit) {
          // 删除完当前页数据自动跳转到上一页
          this.query._start = this.query._start - this.query._limit
          this.page.page--
        }
        this.property()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    addfangchan() {
      this.showDialog = true
    }
  }
}
</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .titleelrow{
    padding: 0 20px;
    padding-bottom: 10px;
  }
  hr{
   background-color: #dcdfe6;
  }

</style>
